<template>
    <div>
        <ModalComponent @open="handleOpen" modal-name="grading-teacher-modal" title="批卷老师管理" :close-on-click-modal="false"
            size="1000px" type="drawer" >
            <div class="head-btns">
                <el-button size="large"
                    @click="handleOpenInfoModal({ data: { siteId: query_data.siteId }, type: 'add' })">添加批卷老师</el-button>
            </div>
            <div>
                <el-table v-loading="loading" empty-text="暂无数据... " :data="tableData" border style="width: 100%">
                    <el-table-column label="ID" prop="gradingTeacherId" width="100" />
                    <!-- <el-table-column label="赛项名称" prop="eventName" /> -->
                    <el-table-column label="考场名称" prop="siteName" />
                    <el-table-column label="教师名称" prop="teacherName" />
                    <el-table-column label="登录账号" prop="teacherUsername" />
                    <el-table-column label="登录密码" prop="teacherPassword" />
                    <el-table-column label="操作" prop="Address" width="100">
                        <template #default="scope">
                            <el-dropdown trigger="click" @command="(value) => handleOperate(value, scope.row)">
                                <span class="el_dropdown_link">
                                    操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item :icon="Edit" command="edit"> 编辑 </el-dropdown-item>
                                        <el-dropdown-item :icon="Delete" command="del"> 删除 </el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </template>

                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination background layout="prev, pager, next, total" :total="total"
                        @current-change="handlePage" />
                </div>
            </div>
            <GradingTeacherInfoModal @update="handleCloseModalAndUpdateData" />
        </ModalComponent>
    </div>
</template>
<script setup >
import { onMounted, ref } from 'vue'
import ModalComponent from "@/components/modal/index.vue"
import { usePage } from "@/hooks/usePage"
import { DelGradingTeacher, GetGradingTeacherList } from '@/api/gradingTeacher';
import { ElMessage, ElMessageBox } from 'element-plus';
import GradingTeacherInfoModal from "./grading-teacher-info.vue"
import { close, open } from '@/utils/modal';
// 表格数据
const {
    total: total,
    data: tableData,
    query_data,
    loading,
    handleLoad,
    handlePage
} = usePage({
    api_fn: GetGradingTeacherList,
    q_data: {
        siteId: '',
    }
})

const handleOpen = (item) => {
    console.log(item);
    query_data.value.siteId = item.siteId
    handleLoad(true);
}

const handleOperate = (command, row) => {
    if (command == 'edit') {
        // TODO 编辑弹窗
        handleOpenInfoModal({
            data: row,
            type: 'edit'
        });
        return;
    }
    if (command == 'del') {
        ElMessageBox.confirm('确定是否要删除该老师？', "提示", {
            "cancel-button-text": "取消",
            "confirm-button-text": "确定",
            type: "warning"
        }).then(async () => {
            let res = await DelGradingTeacher({
                gradingTeacherId: row.gradingTeacherId,
            })
            if (!res.success) {
                ElMessage.error(res.message);
            } else {
                ElMessage.success(res.message);
            }
            handleLoad(true)
        })
    }
}
const handleOpenInfoModal = (data = {}) => {
    open('grading-teacher-info', data)
}
const handleCloseModalAndUpdateData = () => {
    close('grading-teacher-info');
    handleLoad(true)
}
onMounted(() => {
    console.log('mounted!')
})
</script>
<style lang="scss" scoped>
.el-drawer__header {
    margin: 0;
}

.head-btns {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 16px;
}
</style>